<template>
  <view class="flex-col flex-center w-full">
    <backView />
    <!-- <view class="text-[32rpx] font-bold m-4 flex-center">个人健康标签</view> -->
    <text class="block text-[48rpx] font-extrabold mb-[40rpx] text-center text-blue-600 drop-shadow py-8">个人健康标签</text>
   
    <view class="flex justify-start flex-wrap gap-x-4 gap-y-2 p-4 w-full box-border">
      <nut-tag class="!text-[32rpx]" v-for="item in myTag" :key="item.id" closeable type="success" @close="onRemove(item)"> {{ item.tagName }} </nut-tag>
    </view>
    <nut-empty class="w-full m-4" description="暂无标签" v-if="myTag.length === 0"></nut-empty>
    <nut-popup v-model:visible="show" position="bottom">
      <tags class="w-full" @addTag="onAddTag" @close="show = false" />
      <!-- <IconFont name="close" size="24" color="#999" class="!absolute !top-[20rpx] !right-[20rpx]" @click="show = false" /> -->

      <!-- <view class="flex-center m-4 gap-x-8">
        <nut-button type="default" @click="show = false">关 闭</nut-button>
      </view> -->
    </nut-popup>
    <view class="fixed bottom-4 w-full p-4 box-border">
      <nut-button class="!w-full" type="success" @click="show = true">添加标签</nut-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import backView from '@/components/backView.vue';
import tags from "./components/tags.vue";
import { request } from "@/service/request";
import { useAuthStore } from "@/store";
import Taro from "@tarojs/taro";
import { localStg } from "@/utils";
import { IconFont } from '@nutui/icons-vue-taro'


const userStore = useAuthStore();

const myTag = ref<any[]>([]);

const show = ref(false);
let obj: any = {};
onMounted(() => {
  setTimeout(() => {
    obj = localStg.get("demographicInfo");
    getTagList();
  }, 900);
});

const getTagList = () => {
  //   if(obj){
  //     form.name = obj.name;
  //     form.idNumber = obj.idNumber;
  //     form.recordid = obj.recordid;
  //   }
  request
    .get(
      "/health_records/health_recordtag/healthRecordTagInfo/list",
      {
        idNumber: obj.idNumber,
      },
      {
        useErrMsg: true,
      }
    )
    .then((res: any) => {
      console.log("res==== my tag", res);
      myTag.value = res.success?.records || [];
    });
};

const onAddTag = (item: any) => {
  console.log("item==== add tag ===", item);
  if (myTag.value.find((tag) => tag.tagId === item.id)) {
    Taro.showToast({
      title: "标签已存在",
      icon: "none",
    });
    return;
  }
  // myTag.value.push(item);
  request
    .post(
      "/health_records/health_recordtag/healthRecordTagInfo/add",
      {
        idNumber: obj.idNumber,
        tagId: item.id,
        tagName: item.name,
      },
      {
        useErrMsg: true,
      }
    )
    .then((res: any) => {
      console.log("res==== add tag", res);
      getTagList();
    });
  // show.value = false;
};

const onRemove = (item: any) => {
  // myTag.value = myTag.value.filter((tag) => tag.id !== item.id);
  request
    .delete(
      "/health_records/health_recordtag/healthRecordTagInfo/delete?id=" + item.id,
      {
        // id: item.id,
      },
      {
        useErrMsg: true,
      }
    )
    .then((res: any) => {
      console.log("res==== delete tag", res);
      getTagList();
    });
};
</script>
<style lang="scss">
.nut-tag {
  font-size: 14px;
  padding: 4px 8px;
}
</style>
